<template>
    <TabGrayEasyCard :title="'预算对标'" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab"
        :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList" :lineText="''" :barText="''"
        :unitText="`单位：${card.unitText}`" :updateText="card.updateText"
        v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
        <slot>
            <el-table :data="card.tableData" height="100%">
                <el-table-column prop="subjectName" label="指标" :align="'left'" />
                <el-table-column label="预算" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.accMonthBudget) }}
                    </template>
                </el-table-column>
                <el-table-column label="实际" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.accMonthActual) }}
                    </template>
                </el-table-column>
                <el-table-column label="完成率" :align="'right'">
                    <template #default="scope">
                        <span :class="{ 'zs-text-red': scope.row.wclRed == '1', 'zs-text-orange': scope.row.wclRed == '2' }">{{ scope.row.accMonthPc }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="tableLabel" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.accYearErlier) }}
                    </template>
                </el-table-column>
            </el-table>
        </slot>
    </TabGrayEasyCard>
</template>

<script setup>
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
import { toThousands } from '@/utils/number-util'
import dashBoardApi from '@/api/JointVenture/dashBoard'
import { ref, reactive, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute().query
const tabPermi = route.tabPermi

const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
    projectZylyCode: {
        type: String,
        required: false,
        default: ''
    },
    updateDate: {
        type: String,
        required: false,
        default: ''
    }
})
const card = reactive(
    {
        tabs: [{ label: '月度', value: '月度' }, { label: '累计', value: '累计' }, { label: '全年', value: '全年' }],
        curTab: '累计',
        tabRight: '',
        // grayCardList: [],
        unitText: '',
        updateText: '',
        tableData: [],
        // startDate: '',
        // endDate: '',
    }
)

const getChartData = () => {
    dashBoardApi.saleroomBudgetRSDApi({ projectZylyCode: props.projectZylyCode, dataType: card.curTab, dataTime: props.updateDate.substring(0,7) }).then((res) => {
        if (res.data.code == 200) {
            card.tabRight = res.data.data.rightTime
            card.tableData = res.data.data.dataList
            card.unitText = res.data.data.unit
            card.updateText = res.data.data.lowerRightTime
        }
    }).catch(err => {
        console.log(err)
    });
}

const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
    // if(tabPermi == 'p_btn_901_ziyingxiangmu_ziying') {
        router.push({
            path: '/page/routeController/index',
            query: {
                rid: 'SelfSupport/detailPages/budgetcAhievement/subjectDetail',
                rTitle: card.curTab == '月度' ? '月份明细' : '科目明细',
                projectZylyCode: props.projectZylyCode,
                updateDate: props.updateDate,
                tabPermi: tabPermi,
                curTab: card.curTab == '月度' ? '月份' : '科目',
            },
        })
    // }
}
const changeTab = (value) => {
    // 切换tab，更换开始和结束日期
    // 按天：开始和结束日期，均为【数据更新日期】
    // 按月：开始日期为【数据更新日期】当月第一天，结束日期为【数据更新日期】
    // 按年：开始日期为【数据更新日期】当年第一天，结束日期为【数据更新日期】
    if(value == '月度') {
        tableLabel.value = '同比'
    }
    if(value == '累计') {
        tableLabel.value = '同比'
    }
    if(value == '全年') {
        tableLabel.value = '缺口'
    }
    card.curTab = value
    getChartData()
}
let tableLabel = ref('同比')

getChartData()

const projectZylyCode = computed(() => {
    return props.projectZylyCode
});
watch(projectZylyCode, () => {
    getChartData()
}, { deep: true });
</script>

<style scoped lang="scss"></style>
